<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="shortcut icon" href="logo.png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="prism.css">
<link rel="stylesheet" href="style.css">
<title>PostMan Clone</title>
</head>
<body>
<!-- nav bar -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">GET-POST REQUEST</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
<a class="nav-link" href="https://github.com/singhkunal01">Contact Me</a>
</div>
</div>
</div>
</nav>
<!-- alert if the url is empty -->
<div id="failure-alert" class="url-alert alert alert-danger alert-dismissible shake show" role="alert">
<strong>Hey User !! </strong>Please Make sure you have filled the Type or Paste The URL (It should'nt be Empty).
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- main heading -->
<div class="container">
<h2 class="my-3" id="heading">Get/Post Your Request </h2>
</div>
<!-- main container for all functions (selection ,getting ,posting etc,.) -->
<div class="container">
<!-- url pasting section -->
<div class="form-group row">
<label for="url" class="col-sm-2 col-form-label">Enter Your URL</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="url" placeholder="Type or Paste The URL" />
</div>
</div>
<!-- radio button for selction of getting or posting requestType -->
<fieldset class="form-group my-4">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Request Type</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="requestType" id="getRequest" value="GET" checked />
<label class="form-check-label" for="getRequest"> GET </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="requestType" id="postRequest" value="POST" />
<label class="form-check-label" for="postRequest"> POST </label>
</div>
</div>
</div>
</fieldset>
<!-- main content type box for json and selection of custom parameters -->
<fieldset class="form-group my-4">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Content Type</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label" for="jsonRadio"> JSON </label>
<input class="form-check-input" type="radio" name="contentType" id="jsonRadio" value="json" checked />
</div>
<div class="form-check">
<label class="form-check-label" for="customRadio">
Custom Parameters
</label>
<input class="form-check-input" type="radio" name="contentType" id="customRadio" value="custom" />
</div>
</div>
</div>
</fieldset>
<!-- this is section where if the user choose Custom Parameters then this section will appear otherwise it will be hidden -->
<div id="parameter-box">
<div class="form-group row">
<label for="paramKey" class="col-sm-2 col-form-label">Parameter 1</label>
<div class="col-md-4">
<input type="text" class="form-control" id="paramKey1" placeholder="Key Of Parameter 1" />
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="paramValue1" placeholder="Value Of Parameter 1" />
</div>
<div class="col-md-2">
<button class="btn btn-primary" id="addBtn">Add </button>
</div>
</div>
</div>
<div id="addMoreParameters"></div>
<!-- if the user clicks on json then this option will shown to the user instead of custom parameters; -->
<div class="my-3" id="requestJsonBox">
<div class="form-group row">
<label for="json-box" class="col-sm-2 col-form-label">Enter JSON</label>
<div class="col-sm-10">
<textarea class="form-control" id="json-box" rows="3" placeholder="Enter /Paste Your JSON"></textarea>
</div>
</div>
</div>
<!-- submit button to fetch the data -->
<div class="form-group row">
<div class="col-sm-10">
<button class="btn btn-primary" id="submit-btn">Submit</button>
</div>
</div>
<!-- section where we got the response after fetching the result -->
<div class="my-3" id="responseJsonBox">
<div class="form-group row">
<label for="response-box" class="col-sm-2 col-form-label">Response</label>
<div class="col-sm-10">
<!-- <textarea class="form-control" id="response-box" rows="3">
Your Response Is Displayed Here....</textarea> -->
<pre id="prismPre" class="language-javascript">
<code id="response-box" class="language-javascript">
Hey User, Please Wait a Minute We are fetching the Required Results.This May Take some Time !!
</code></pre>
</div>
</div>
</div>
</div>
<footer>
<p>< / > with ❤️ by
<a href="https://github.com/singhkunal01">Kunal Singh</a>
</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="Postman clone.js"></script>
<script src="prism.js"></script>
</body>
</html>